<html> 
  <head> 
    <title>html shader</title> 
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="../math/point2d.js"></script>
    <script type="text/javascript" src="../math/vector2d.js"></script>
    <script type="text/javascript" src="../util/map.js"></script>
    <script type="text/javascript" src="../math/glMatrix.js"></script>
    <script type="text/javascript" src="../draw/renderer.js"></script>
    <script type="text/javascript" src="../draw/shader.js"></script>
    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif
        
        varying vec4 vColor;
                
        void main(void) {
            gl_FragColor = vColor;
        }
    </script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aPos;
        attribute vec4 aColor;
        
        uniform mat4 uWM;
        uniform mat4 uVPM;
        
        varying vec4 vColor;
        
        void main(void) {
            gl_Position = uVPM * uWM * vec4(aPos, 1.0);
            vColor = aColor;
        }
    </script>
    <script type="text/javascript">
        var renderer;
        var shader;
        var positions;
        var colors;
        var indeies;
        var gl;
        var wM;
        
        var xAngle = 0;
        var yAngle = 0;
        var zAngle = 0;
        
        function onTimer() {
            mat4.identity( wM);
    		mat4.translate( wM, [400, -300, 0]);
    		mat4.scale( wM, [100, 100, 100]);
    		xAngle += 0.01;
    		yAngle += 0.02;
    		zAngle += 0.03;
    		mat4.rotateX( wM, xAngle);
    		mat4.rotateY( wM, yAngle);
    		mat4.rotateZ( wM, zAngle);
    		
    		
            renderer.beginScene();
            renderer.setShader( shader);
            renderer.setVertexBuffer( positions, shader.aPos);
            renderer.setBuffer( colors, shader.aColor);
            renderer.uniformMatrix( shader.uWM, wM);
            renderer.uniformViewProjMatrix( shader.uVPM);
            renderer.drawElements( indeies);
    	}
    	
     	$(document).ready( function() {
     	    var canvas = $("#myCanvas")[0];
    		if ( !canvas || !canvas.getContext)
    			return;
    	    
    	    renderer = new Renderer();
    	    if ( renderer.init( canvas))
    	        return;
    	    gl = mix.gl;
    	    shader = mix.shaderMgr.set( mix.gl, 1, $.text( $("#shader-vs")), $.text( $("#shader-fs")));
    	    if ( !shader)
    	        return;
    	    shader.attrib( mix.gl, "aPos");
    	    shader.attrib( mix.gl, "aColor");
    	    shader.uniform( mix.gl, "uWM");
    	    shader.uniform( mix.gl, "uVPM");
    	    
    	    var ar = [
	          // Front face
              -1.0, -1.0,  1.0,
               1.0, -1.0,  1.0,
               1.0,  1.0,  1.0,
              -1.0,  1.0,  1.0,
        
              // Back face
              -1.0, -1.0, -1.0,
              -1.0,  1.0, -1.0,
               1.0,  1.0, -1.0,
               1.0, -1.0, -1.0,
        
              // Top face
              -1.0,  1.0, -1.0,
              -1.0,  1.0,  1.0,
               1.0,  1.0,  1.0,
               1.0,  1.0, -1.0,
        
              // Bottom face
              -1.0, -1.0, -1.0,
               1.0, -1.0, -1.0,
               1.0, -1.0,  1.0,
              -1.0, -1.0,  1.0,
        
              // Right face
               1.0, -1.0, -1.0,
               1.0,  1.0, -1.0,
               1.0,  1.0,  1.0,
               1.0, -1.0,  1.0,
        
              // Left face
              -1.0, -1.0, -1.0,
              -1.0, -1.0,  1.0,
              -1.0,  1.0,  1.0,
              -1.0,  1.0, -1.0,
    	    ];
    	    positions = renderer.createBuffer( ar, 3);
    	    var cr = [
              [1.0, 0.0, 0.0, 1.0],     // Front face
              [1.0, 1.0, 0.0, 1.0],     // Back face
              [0.0, 1.0, 0.0, 1.0],     // Top face
              [1.0, 0.5, 0.5, 1.0],     // Bottom face
              [1.0, 0.0, 1.0, 1.0],     // Right face
              [0.0, 0.0, 1.0, 1.0],     // Left face
    	    ];
    	    var unpackedColors = [];
    	    for ( var i in cr) {
    	        var color = cr[i];
    	        for ( var j = 0; j < 4; ++j)
    	            unpackedColors = unpackedColors.concat( color);
    	    }
    	    colors = renderer.createBuffer( unpackedColors, 4);
    	    var ir = [
              0, 1, 2,      0, 2, 3,    // Front face
              4, 5, 6,      4, 6, 7,    // Back face
              8, 9, 10,     8, 10, 11,  // Top face
              12, 13, 14,   12, 14, 15, // Bottom face
              16, 17, 18,   16, 18, 19, // Right face
              20, 21, 22,   20, 22, 23  // Left face
    	    ];
    	    indeies = renderer.createIndexBuffer( ir, 1);
    	    
    	        
    		wM = mat4.create();
    		mat4.identity( wM);
    		mat4.translate( wM, [400, -300, 0]);
    		mat4.scale( wM, [100, 100, 100]);
    		setInterval( "onTimer()", 33);
    		//onTimer();
    		
    	});
		</script> 
  </head> 
  <body> 
    <canvas id="myCanvas" width="800" height="600">
    	Your browser does not have support for Canvas.
    </canvas>
  </body> 
</html> 